<template>
	<view class="layout" v-if="isShow">
		<view class="goBack" @click="goBack" :style="{top:(getStatusBarHeight()-2)+'px'}">
			<uni-icons type="back" color="#fff" size="20"></uni-icons>
		</view>
		<score-view :score="score" @tap="addScoreClick"></score-view>
		<view class="content">
			<view class="title">
				<view class="bg">
					<image :src="itemDetail.bg" mode="aspectFill"></image>
				</view>
				<view class="info" :style="{top:20+'px'}">
					<view class="title1">
						{{title}}
					</view>
					<view class="title2">
						{{itemNums}}次机会最高中奖金币数100万
					</view>
					<view class="title3">
						{{itemDetail.subtitle}}
					</view>
				</view>
			</view>
			<view class="winnums">
				<view class="items">
					<view class="item" v-for="item in openNums">
						<view class="winnum">
							{{item.num}}
						</view>
						<view class="znum">
							{{item.pinyin}}
						</view>
					</view>
				</view>
				<canvas v-if="!isShowWin" class="canvas1" id="canvas1" canvas-id="canvas1" @touchstart="touchstart"
					@touchmove="touchmove" @touchend="touchend"></canvas>
			</view>
			<view class="tip">
				<image src="../../static/ic_win_num.png" mode="aspectFill"></image>
				<view class="tip2">
					<image src="../../static/ic_my_num.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="usernums" :style="{ height : numHeight + 'rpx'}">
				<view class="items">
					<view class="item" v-for="item in userNums"
						:style="{ border: item.isWin && isShowWinNums? '2px solid red' : 'none' }">
						<view class="winnum">
							{{item.num}}
						</view>
						<view class="znum">
							{{item.pinyin}}
						</view>
						<view class="money">
							￥{{item.money}}
						</view>
					</view>
				</view>
				<canvas v-if="!isShowWin" class="canvas2" id="canvas2" disable-scroll=true canvas-id="canvas2"
					@touchstart="touchstart2" @touchmove="touchmove2" @touchend="touchend2"></canvas>
			</view>
		</view>
		<view class="menuBar" v-if="!isGaming">
			<view class="group" :style="{opacity:menuState?1:0,transform:menuState?'scaleX(1)':'scaleX(0)'}">
				<view class="item" hover-class="hoverItem" @click="autoPlayClick">
					<uni-icons type="checkbox" size="26"></uni-icons>
					<view class="text">自动刮奖</view>
				</view>
				<view class="item" hover-class="hoverItem" @click="autoPlayClickTen">
					<uni-icons type="loop" size="26"></uni-icons>
					<view class="text">连刮10张</view>
				</view>
				<view class="item" hover-class="hoverItem" @click="refreshBtnSubmit">
					<uni-icons type="upload" size="26"></uni-icons>
					<view class="text">再来一张</view>
				</view>
				<view class="item" hover-class="hoverItem" @click="soundBtnClick">
					<uni-icons v-if="isOpenSound" type="mic" size="26"></uni-icons>
					<uni-icons v-if="!isOpenSound" type="micoff" size="26"></uni-icons>
					<view class="text">音效</view>
				</view>
			</view>
			<view class="close" @click="closeMenu">
				<uni-icons type="closeempty" size="20" color="#fff" v-if="menuState"></uni-icons>
				<uni-icons type="list" size="20" color="#fff" v-else></uni-icons>
			</view>
		</view>
		<uni-popup ref="resultPopup" :is-mask-click="false" mask-background-color="rgba(0,0,0,0.8)">
			<view class="resultPopup">
				<view class="bg win" v-if="winMoney!== 0">
					<view class="text">{{'恭喜您中得'+winMoney+'奖励'}}</view>
				</view>
				<view class="bg loser" v-else>
					<view class="text">{{'机会只留给有准备的人，\n再试一次吧！'}}</view>
				</view>
				<view class="doubelBtn" @click="doubelBtnSubmit" v-if="winMoney!== 0 && winMoney <= 10000 &&!isDouble">
					<button type="primary">奖励翻倍</button>
				</view>
				<view class="submitBtn" @click="onSubmit" v-if="winMoney!== 0 && winMoney <= 10000 &&!isDouble">
					<button type="primary">再来一次</button>
				</view>
				<view class="submitBtnLose" @click="onSubmit" v-if="winMoney == 0">
					<button type="primary">再来一次</button>
				</view>
				<view class="close" @click="closeResult">
					<uni-icons type="close" color="#eee" size="40"></uni-icons>
				</view>
			</view>
		</uni-popup>
	</view>
	

</template>

<script>
	import {
		getStatusBarHeight,
		getNavBarHeight,
		rpxToPx,
		pxToRpx
	} from "@/utils/system.js";
	import {
		getTotalUserScore,
		getUserScoreFromCloud,
		saveUserTotalScoreToCloud,
		getUserScore,
		addUserScore,
		saveUserAddScoreToLocal,
		SignInGetScore,
		SignInGetScoreLocal
	} from '../../store/scoreManager.js';
	import {
		getOffMony,
		getOnMony,
		padZero,
		getPinyinWithNum,
		getRandomNum,
		getRandomNumExcepts
	} from '../../utils/random.js';
	import {
		getTodayDateString,
		getTodayMonthString
	} from '../../utils/common.js';

	export default {
		data() {
			return {
				// 在页面中定义插屏广告
				interstitialAd: null,
				title: '',
				titleHeight: 0,
				numHeight: 0,
				isShowWin: false,
				content: "刮开覆盖膜，如果任意一个“我的号码”与“中奖号码”相同，即可获得该“我的号码”下方所对应的金币。",
				tips: ' 设置奖项：￥10,000,000、￥5,000,000、￥2,000,000、￥1,000,000、￥500,000、￥100,000、￥50,000、￥10,000、￥1,000、￥500、￥200、￥100',
				openNums: [],
				userNums: [],
				viewWidth: 0,
				viewHeight: 0,
				score: 0,
				ctx: null,
				viewWidth2: 0,
				viewHeight2: 0,
				ctx2: null,
				points: [],
				points2: [],
				winPoints: 0,
				userPoints: 0,
				resultPopup: null,
				winMoney: 0,
				itemNums: 0,
				cost: -50,
				isDouble: false,
				videoAd: null,
				usertype: 0,
				itemtype: 0,
				isShow: false,
				itemWidth: 55,
				startX: 0,
				startY: 0,
				isShowWinNums: false,
				isSignup: false,
				// 菜单栏
				menuState: true,
				// 声音
				isOpenSound: true,
				// 是否结束
				isGameFinish: false,
				// 是否正在游戏
				isGaming: false,
				// 10次赢钱数
				totalWinMoneys: 0,
				// 10次游戏次数
				totalGameTimes: 0,
				// 是否没钱了
				isNoMonyes: false,
				timer: null,
				// 菜单栏是否可用
				isMenuToolEnable: false,
				// 1 签到增加金币 2双倍 3.工具栏
				adType: 0,
				// 游戏是否准备完成  是否已经扣钱
				isGameReady: false,
				isNewUser: false
			};
		},
		mounted() {
			this.drawInit();
		},
		methods: {
			// 菜单状态切换
			closeMenu() {
				this.menuState = !this.menuState;
			},
			// 点击自动刮奖按钮
			autoPlayClick() {
				this.adType = 3;
				if (this.isMenuToolEnable === false) {
					if (this.videoAd) {
						this.videoAd.show().catch(() => {
							// 失败重试
							this.videoAd.load()
								.then(() => this.videoAd.show())
								.catch(err => {
									console.error('激励视频 广告显示失败', err);
									uni.showToast({
										title: '广告拉取失败，请检查网络状况后重试',
										icon: "none",
										duration: 1500
									});
								});
						});
					}
				} else {
					// 停止老的计时器
					if (this.timer) {
						clearInterval(this.timer);
					}
					if (this.isGameFinish === true) {
						if (this.isGameReady === false) {
							this.refreshBtnSubmit();
							setTimeout(() => {
								this.singleAutoPlay();
							}, 600);
						} else {
							this.singleAutoPlay();
						}
					} else {
						this.singleAutoPlay();
					}
				}
			},
			singleAutoPlay() {
				this.isGaming = true;
				let startX = 0;
				let startY = 0;
				this.timer = setInterval(() => {
					this.ctx.clearRect(startX, startY, 150, 150);
					this.ctx.draw(true);
					this.ctx2.clearRect(startX, startY, 150, 150);
					this.ctx2.draw(true);
					startX = startX + 50;
					if (startX >= pxToRpx(uni.getWindowInfo().screenWidth - 200)) {
						startY += 120;
						startX = 0;
					}
					if (pxToRpx(startY) >= this.numHeight) {
						clearInterval(this.timer);
						this.autoCheckShowAnwser();
						startX = 0;
						startY = 0;
						this.isGaming = false;
					}
				}, 50);
			},
			// 单次刮奖不兑奖
			singleAutoPlayNotCheck() {
				let startX = 0;
				let startY = 0;
				this.timer = setInterval(() => {
					this.isShowWinNums = true;
					this.ctx.clearRect(startX, startY, 150, 150);
					this.ctx.draw(true);
					this.ctx2.clearRect(startX, startY, 150, 150);
					this.ctx2.draw(true);
					startX = startX + 50;
					if (startX >= pxToRpx(uni.getWindowInfo().screenWidth - 200)) {
						startY += 120;
						startX = 0;
					}
					if (pxToRpx(startY) >= this.numHeight) {
						clearInterval(this.timer);
						this.isGameFinish = true;
						this.isGameReady = false;
						this.totalWinMoneys += this.winMoney;
						this.winMoney = 0;
						this.isShowWinNums = true;
						startX = 0;
						startY = 0;
						this.tenTimesAutoPlayGame();
					}
				}, 50);
			},
			// 连抽10次
			autoPlayClickTen() {
				this.adType = 3;
				if (this.isMenuToolEnable === false) {
					if (this.videoAd) {
						this.videoAd.show().catch(() => {
							// 失败重试
							this.videoAd.load()
								.then(() => this.videoAd.show())
								.catch(err => {
									console.error('激励视频 广告显示失败', err);
									uni.showToast({
										title: '广告拉取失败，请检查网络状况后重试',
										icon: "none",
										duration: 1500
									});
								});
						});
					}
				} else {
					this.isGaming = true;
					this.totalWinMoneys = 0;
					this.totalGameTimes = 0;
					if (this.timer) {
						clearInterval(this.timer);
					}
					this.tenTimesAutoPlayGame();
				}
			},
			// 开始10次递归玩游戏
			tenTimesAutoPlayGame() {
				if (this.totalGameTimes !== 10) {
					this.totalGameTimes += 1;
					if (this.isGameFinish === true) {
						this.refreshBtnSubmit();
						// 判断是否没钱了
						if (this.isNoMonyes === false) {
							setTimeout(() => {
								this.singleAutoPlayNotCheck();
							}, 600);
						} else { //没钱提前结束游戏
							this.totalGameTimes = 10;
							this.isGaming = false;
							this.winMoney = this.totalWinMoneys;
							this.autoCheckShowAnwser();
						}
					} else {
						this.singleAutoPlayNotCheck();
					}
				} else {
					this.winMoney = this.totalWinMoneys;
					this.autoCheckShowAnwser();
					this.isGaming = false;
				}
			},
			// 关闭声音按钮点击
			soundBtnClick() {
				this.isOpenSound = !this.isOpenSound;
				uni.setStorageSync("isOpenSound", this.isOpenSound);
			},
			async autoCheckShowAnwser() {
				if (this.isOpenSound === true) {
					if (this.winMoney !== 0) {
						const innerAudioContext = uni.createInnerAudioContext();
						innerAudioContext.autoplay = false;
						innerAudioContext.src = "/static/audio/huanhu.mp3";
						innerAudioContext.play();
					} else {
						const innerAudioContext = uni.createInnerAudioContext();
						innerAudioContext.autoplay = false;
						innerAudioContext.src = "/static/audio/kexi.mp3";
						innerAudioContext.play();
					}
				}
				this.isShowWin = true;
				this.isShowWinNums = true;
				this.isGameFinish = true;
				this.isGameReady = false;
				setTimeout(() => {
					this.$refs.resultPopup.open();
					this.score = saveUserAddScoreToLocal(this.winMoney, this.itemtype);
				}, 1000);
			},
			goBack() {
				// 停止刮奖
				if (this.timer) {
					clearInterval(this.timer);
				}
				uni.navigateBack({
					success: () => {},
					fail: () => {
						uni.reLaunch({
							url: '/pages/index/shouye'
						});
					}
				});
			},
			onShow() {
				this.score = getTotalUserScore();
				this.loadHomeAd();
				// 获取音效开关
				this.isOpenSound = uni.getStorageSync("isOpenSound");
				const menuValueString = uni.getStorageSync("isEnableMenuTool" + this.title);
				const dayString = getTodayDateString();
				if (menuValueString && menuValueString === dayString) {
					this.isMenuToolEnable = true;
				} else {
					this.isMenuToolEnable = false;
				}
			},
			// 和生命周期函数同级
			// 返回值为true 不允许
			// 返回则允许
			onBackPress(options) {
				// 点击虚拟键或者侧滑的时候触发（不允许返回）
				if (options.from === 'backbutton') {
					return true;
				}
				// 否则则允许返回
				return false;
			},
			onLoad(options) {
				const e = options;
				this.itemDetail = JSON.parse(e.itemDetail);
				this.title = this.itemDetail.name;
				this.isNewUser = e.isNewUser;
				if (!this.itemDetail.title || !this.itemDetail.cost) {
					uni.reLaunch({
						url: '/pages/detail/detail0' + '?title=平安喜乐'
					});
					return;
				}
				this.isShow = true;
				this.titleHeight = getStatusBarHeight() + 10;
				this.numHeight = pxToRpx(uni.getWindowInfo().screenHeight - getNavBarHeight()) - (350 + 200 + 50);
				this.itemNums = Math.floor(this.numHeight / 120.0) * 5;

				setTimeout(() => {
					this.creatNums();
				}, 1000);

				// 在页面onLoad回调事件中创建激励视频广告实例
				if (wx.createRewardedVideoAd) {
					this.videoAd = wx.createRewardedVideoAd({
						adUnitId: 'adunit-68d6f70cfd097fdb'
					});
					this.videoAd.onLoad(() => {});
					this.videoAd.onError((err) => {
						console.error('激励视频光告加载失败', err);
					});
					this.videoAd.onClose((res) => {
						// 用户点击了【关闭广告】按钮
						if (res && res.isEnded) {
							// 正常播放结束，可以下发游戏奖励
							if (this.adType === 1) {
								this.score = saveUserAddScoreToLocal(1000, 1);
							} else if (this.adType === 2) {
								this.score = saveUserAddScoreToLocal(this.winMoney, 99);
								this.isDouble = true;
							} else if (this.adType === 3) {
								const dayString = getTodayDateString();
								uni.setStorageSync("isEnableMenuTool" + this.title, dayString);
								this.isMenuToolEnable = true;
							}
						} else {
							if (this.adType === 1) {
								uni.showToast({
									title: '未获得奖励，每次完成广告观看可获得1000金币奖励',
									icon: "none",
									duration: 2000
								});
							} else if (this.adType === 2) {
								// 播放中途退出，不下发游戏奖励
								uni.showToast({
									title: '未获得奖励，观看完成可获得当前得奖的双倍奖励！',
									icon: "none",
									duration: 2000
								});
							} else if (this.adType === 3) {
								// 播放中途退出，不下发游戏奖励
								uni.showToast({
									title: '未获得奖励，仅观看一次广告，全天可用！',
									icon: "none",
									duration: 2000
								});
							} else {
								uni.showToast({
									title: '中途退出，未获得奖励！',
									icon: "none",
									duration: 2000
								});
							}
						}
					});
				}

				// 在页面onLoad回调事件中创建插屏广告实例
				if (wx.createInterstitialAd) {
					this.interstitialAd = wx.createInterstitialAd({
						adUnitId: 'adunit-1722f7e6276cc54a'
					});
					this.interstitialAd.onLoad(() => {});
					this.interstitialAd.onError((err) => {
						console.error('插屏广告加载失败', err);
					});
					this.interstitialAd.onClose(() => {});
				}
			},
			doubelBtnSubmit() {
				this.adType = 2;
				if (this.videoAd) {
					this.videoAd.show().catch(() => {
						// 失败重试
						this.videoAd.load()
							.then(() => this.videoAd.show())
							.catch(err => {
								console.error('激励视频 广告显示失败', err);
								uni.showToast({
									title: '广告拉取失败，请检查网络状况后重试',
									icon: "none",
									duration: 1500
								});
							});
					});
				}
			},
			// 插屏广告
			loadHomeAd() {
				if (this.itemDetail.isShowAds === false) {
					return;
				}
				const key = "detail-AD" + this.itemDetail.type;
				const count = uni.getStorageSync(key);
				const day = getTodayDateString();
				if (count) {
					const c = count.split("--");
					if (c[0] === day) {
						if (Number(c[1]) < this.itemDetail.adTimes) {
							this.loadAD();
							uni.setStorageSync(key, day + "--" + (Number(c[1]) + 1));
						}
					} else {
						this.loadAD();
						uni.setStorageSync(key, day + "--" + 1);
					}
				} else {
					this.loadAD();
					uni.setStorageSync(key, day + "--" + 1);
				}
			},
			loadAD() {
				console.error('加载插屏广告');
				// 在适合的场景显示插屏广告
				if (this.interstitialAd) {
					this.interstitialAd.show().catch((err) => {
						console.error('插屏广告显示失败', err);
					});
				}
			},
			// 看广告得金币
			addScoreClick() {
				this.adType = 1;
				if (this.videoAd) {
					this.videoAd.show().catch(() => {
						// 失败重试
						this.videoAd.load()
							.then(() => this.videoAd.show())
							.catch(err => {
								console.error('激励视频 广告显示失败', err);
								uni.showToast({
									title: '广告拉取失败，请检查网络状况后重试',
									icon: "none",
									duration: 1500
								});
							});
					});
				}
			},
			closeResult() {
				this.$refs.resultPopup.close();
			},
			refreshBtnSubmit() {
				if (this.isGameReady === false) {
					return this.onSubmit();
				}
				return true;
			},
			onSubmit() {
				this.isDouble = false;
				this.isGameFinish = false;
				if (this.score >= 50) {
					this.isGameReady = true;
					this.score = saveUserAddScoreToLocal(this.cost);
					this.isNoMonyes = false;
					if (this.$refs.resultPopup) {
						this.$refs.resultPopup.close();
					}
					this.winMoney = 0;
					this.isShowWin = false;
					this.isShowWinNums = false;
					this.isDouble = false;
					this.ctx = null;
					this.points = [];
					this.ctx2 = null;
					this.points2 = [];
					this.winPoints = 0;
					this.userPoints = 0;

					setTimeout(() => {
						if (this.score >= 0) {
							this.creatNums();
							this.drawInit();
						}
					}, 500);
					return true;
				} else {
					this.$refs.resultPopup.close();
					this.isGameReady = false;
					uni.showToast({
						title: '您的金币不够了，点击上方金币"+"按钮观看广告增加1000金币。',
						icon: "none",
						duration: 2000
					});
					this.isNoMonyes = true;
					return false;
				}
			},
			creatNums() {
				let open = [];
				let user = [];
				let set = new Set([]);
				while (set.size !== 3) {
					set.add(getRandomNum(this.itemDetail.maxNum));
				}
				// 开奖号码
				open = Array.from(set);
				let isDoble = getRandomNum(this.itemDetail.doubleRate) > 1000;
				let isContainWin = true;
				while (user.length !== this.itemNums) {
					// 随机号码
					const num = getRandomNum(this.itemDetail.numRate);
					// 中奖率
					if (open.includes(num)) {
						if (isContainWin) {
							user.push(num);
							isContainWin = false;
						} else if (isDoble) {
							user.push(num);
							isDoble = false;
						}
					} else {
						// 添加不中奖的号码
						if (num < 100) {
							user.push(num);
						} else {
							user.push(getRandomNumExcepts(99, open));
						}
					}
				}
				// 新用户必中1个
				if (this.isNewUser === true && isContainWin === true) {
					user[getRandomNum(20)] = open[0];
				}

				this.openNums = [];
				for (let num in open) {
					const item = {
						num: padZero(open[num], 2),
						pinyin: getPinyinWithNum(open[num])
					};
					this.openNums.push(item);
				}

				this.userNums = [];
				for (let num in user) {
					// 中奖
					let money = "";
					let isWin = false;
					if (open.includes(user[num])) {
						money = getOnMony(this.itemDetail.winRate, this.itemDetail.winsMoney);
						this.winMoney += money;
						isWin = true;
					} else {
						money = getOffMony(this.itemDetail.winsMoney);
					}
					const temp = user[num];
					const item = {
						num: padZero(temp, 2),
						pinyin: getPinyinWithNum(temp),
						money,
						isWin
					};
					this.userNums.push(item);
				}
			},
			touchstart(e) {
				this.startX = e.changedTouches[0].x;
				this.startY = e.changedTouches[0].y;
			},
			touchmove(e) {
				let moveX = e.changedTouches[0].x;
				let moveY = e.changedTouches[0].y;
				this.winPoints = this.winPoints + 1;

				let currentStartX = e.changedTouches[0].x;
				let currentStartY = e.changedTouches[0].y;

				this.ctx.clearRect(this.startX, this.startY, 100, 100);
				this.ctx.draw(true);
				this.startX = e.changedTouches[0].x;
				this.startY = e.changedTouches[0].y;
			},
			clearArcFun(x, y, r, cxt) {
				//(x,y)为要清除的圆的圆心，r为半径，cxt为context
				var stepClear = 1; //别忘记这一步  
				this.clearArc(x, y, r);

				function clearArc(x, y, radius) {
					var calcWidth = radius - stepClear;
					var calcHeight = Math.sqrt(radius * radius - calcWidth * calcWidth);
					var posX = x - calcWidth;
					var posY = y - calcHeight;
					var widthX = 2 * calcWidth;
					var heightY = 2 * calcHeight;
					if (stepClear <= radius) {
						cxt.clearRect(posX, posY, widthX, heightY);
						stepClear += 1;
						clearArc(x, y, radius);
					}
				}
			},
			touchend(e) {
				this.checkShowAnwser();
			},
			getViewHW() {
				return new Promise((resolve, reject) => {
					let info = uni.createSelectorQuery().in(this).select(".winnums");
					info.boundingClientRect((data) => {
						this.viewWidth = data.width;
						this.viewHeight = data.height;
						resolve();
					}).exec(() => {});
				});
			},
			touchstart2(e) {
				this.startX = e.changedTouches[0].x;
				this.startY = e.changedTouches[0].y;
			},
			touchmove2(e) {
				let moveX = e.changedTouches[0].x;
				let moveY = e.changedTouches[0].y;
				this.userPoints = this.userPoints + 1;

				let currentStartX = e.changedTouches[0].x;
				let currentStartY = e.changedTouches[0].y;

				this.ctx2.clearRect(this.startX, this.startY, 100, 100);
				this.ctx2.draw(true);
				this.startX = e.changedTouches[0].x;
				this.startY = e.changedTouches[0].y;
			},
			touchend2(e) {
				this.checkShowAnwser();
			},
			async checkShowAnwser() {
				if (this.winPoints >= 20 && this.userPoints >= 180) {
					if (this.isOpenSound === true) {
						if (this.winMoney !== 0) {
							const innerAudioContext = uni.createInnerAudioContext();
							innerAudioContext.autoplay = false;
							innerAudioContext.src = "/static/audio/huanhu.mp3";
							innerAudioContext.play();
						} else {
							const innerAudioContext = uni.createInnerAudioContext();
							innerAudioContext.autoplay = false;
							innerAudioContext.src = "/static/audio/kexi.mp3";
							innerAudioContext.play();
						}
					}
					this.isGameFinish = true;
					this.isShowWin = true;
					this.isShowWinNums = true;
					setTimeout(() => {
						this.$refs.resultPopup.open();
						this.score = saveUserAddScoreToLocal(this.winMoney, this.itemtype);
					}, 1000);
				} else {
					this.isShowWin = false;
					this.isShowWinNums = false;
				}
			},
			drawInit() {
				this.getViewHW().then(() => {
					this.getViewHW2().then(() => {
						this.ctx2 = uni.createCanvasContext('canvas2', this);
						this.ctx2.clearRect(0, 0, this.viewWidth2, this.viewHeight2);
						this.ctx2.setFillStyle('#bbb'); // 填充颜色
						this.ctx2.fillRect(0, 0, this.viewWidth2, this.viewHeight2); // 填充区域（x,y,宽,高）
						let x = 0;
						let y = 0;
						for (var i = 0; i < this.viewHeight2 / this.itemWidth + 1; i++) {
							y = i * (this.itemWidth + 15);
							for (var j = 0; j < this.viewWidth2 / this.itemWidth + 1; j++) {
								x = j * (this.itemWidth + 15);
								this.ctx2.drawImage('../../static/ic_wallet.png', x, y, this.itemWidth,
									this.itemWidth);
							}
						}
						this.ctx2.draw(); // 将之前在绘图上下文中的描述（路径、变形、样式）画到canvas中。

						this.ctx = uni.createCanvasContext('canvas1', this);
						this.ctx.clearRect(0, 0, this.viewWidth, this.viewHeight);
						this.ctx.setFillStyle('#bbb'); // 填充颜色
						this.ctx.fillRect(0, 0, this.viewWidth, this.viewHeight); // 填充区域（x,y,宽,高）
						let x1 = 0;
						let y1 = 0;
						for (var i = 0; i < this.viewHeight / this.itemWidth + 1; i++) {
							y1 = i * (this.itemWidth + 15);
							for (var j = 0; j < this.viewWidth / this.itemWidth + 1; j++) {
								x1 = j * (this.itemWidth + 15);
								this.ctx.drawImage('../../static/ic_wallet.png', x1, y1, this.itemWidth,
									this.itemWidth);
							}
						}
						this.ctx.draw(); // 将之前在绘图上下文中的描述（路径、变形、样式）画到canvas中。
					});
				});
			},
			getViewHW2() {
				return new Promise((resolve, reject) => {
					let info = uni.createSelectorQuery().in(this).select(".usernums");
					info.boundingClientRect((data) => {
						this.viewWidth2 = data.width;
						this.viewHeight2 = data.height;
						resolve();
					}).exec(() => {});
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: NumFont;
		src: url('https://mp-02da6b36-ab1b-494d-b346-d6763fb77772.cdn.bspapp.com/resource/font/HONORSans-Bold.ttf');
	}

	.layout {
		width: 100%;
		height: 100vh;
		background-color: #ffe21d;
		position: relative;

		.goBack {
			position: fixed;
			margin-left: 10rpx;
			width: 38px;
			height: 38px;
			background: rgba(0, 0, 0, 0.5);
			borderRadius: 50%;
			backdrop-filter: blur(10rpx);
			border: 1rpx solid rgba(255, 255, 255, 0.3);
			display: flex;
			alignItems: center;
			justifyContent: center;
			z-index: 1000;
		}

		.content {
			// width: 100%;
			height: calc(100vh - 40rpx);
			background-color: #de3018;
			marginTop: 0rpx;
			border: 20rpx solid #ffe21d;
			box-sizing: content-box;
			borderRadius: 20px;
			overflow: hidden;
			position: relative;
			display: flex;
			alignItems: center;
			flex-direction: column;

			.title {
				position: relative;
				width: 100%;

				.bg {
					position: absolute;
					top: 0rpx;
					left: 0rpx;
					width: 100%;
					height: 350rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info {
					position: absolute;
					top: 0rpx;
					left: 0rpx;
					width: 100%;
					height: 350rpx;
					display: flex;
					alignItems: center;
					flex-direction: column;

					.title1 {
						width: 100%;
						fontSize: 110rpx;
						fontWeight: bold;
						textAlign: center;
						color: #de3018;

						// color: #ffe21d;
						color: white;
					}

					.title2 {
						width: 80%;
						fontSize: 18px;
						textAlign: center;
						color: #de3018;
						backgroundColor: #ffe21d;
						padding: 0 20rpx;
					}

					.title3 {
						width: 100%;
						marginTop: 20rpx;
						fontSize: 14px;
						textAlign: center;
						color: darkblue;
					}
				}
			}

			.winnums {
				position: relative;
				marginTop: 370rpx;
				height: 186rpx;
				width: 95%;
				backgroundColor: #d8d7d7;
				border: 10rpx solid #ffe21d;
				padding: 0 40rpx;

				.items {
					display: flex;
					alignItems: center;
					justifyContent: space-between;
					flex-direction: row;
					width: 100%;
					height: 100%;

					.item {
						width: 150rpx;
						height: 150rpx;
						backgroundColor: #d1d0d0;
						borderRadius: 50%;

						.winnum {
							width: 100%;
							marginTop: 30rpx;
							fontSize: 60rpx;
							textAlign: center;
							color: #efefef;
							fontFamily: 'NumFont';
							fontWeight: bold;
							-webkit-text-stroke: 1px black;
						}

						.znum {
							width: 100%;
							fontSize: 18rpx;
							textAlign: center;
							color: black;
							marginTop: -10rpx;
						}
					}
				}

				.canvas1 {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}
			}

			.tip {
				marginLeft: 29rpx;
				width: calc(100vw - 44rpx);
				height: 50rpx;
				display: flex;
				justifyContent: space-between;

				image {
					width: 178rpx;
					height: 39rpx;
				}

				.tip2 {
					width: 178rpx;
					height: 39rpx;
					marginRight: 31rpx;

					image {
						marginTop: 12rpx;
						width: 178rpx;
						height: 39rpx;
					}
				}
			}

			.usernums {
				position: relative;
				width: 95%;
				backgroundColor: #d8d7d7;
				border: 10rpx solid #ffe21d;

				.items {
					width: 100%;
					display: grid;
					grid-template-columns: repeat(5, 1fr);
					rowGap: 10rpx;
					columnGap: 20rpx;
					padding: 5rpx;

					.item {
						width: 110rpx;
						height: 110rpx;
						// backgroundColor: #d1d0d0;
						borderRadius: 50%;
						padding: 2rpx;

						.winnum {
							marginTop: 10rpx;
							fontSize: 50rpx;
							textAlign: center;
							color: #efefef;
							fontWeight: bold;
							-webkit-text-stroke: 1px black;
							fontFamily: 'NumFont';
						}

						.znum {
							fontSize: 16rpx;
							textAlign: center;
							color: black;
							marginTop: -5rpx;
						}

						.money {
							fontSize: 20rpx;
							textAlign: center;
							color: black;
							fontWeight: bold;
							marginTop: 0rpx;
						}
					}
				}

				.canvas2 {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}

			}

		}


		.menuBar {
			z-index: 100;
			position: fixed;
			bottom: 20px;
			right: 50%;
			transform: translateX(50%);
			display: flex;
			alignItems: center;
			flex-direction: row;

			.group {
				display: grid;
				grid: auto-flow / 1fr 1fr 1fr 1fr;
				gap: 30rpx;
				transition: 0.3s;
				transform-origin: right center;

				.item {
					background: #ffe21d;
					width: 100rpx;
					height: 100rpx;
					borderRadius: 50%;
					border: 2px solid #de3018;
					display: flex;
					alignItems: center;
					justifyContent: center;
					flex-direction: column;
					box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.6);

					.text {
						marginTop: -5rpx;
						fontSize: 23rpx;
						transform: scale(0.85);
					}
				}

				.hoverItem {
					transform: scale(0.95);
				}
			}

			.close {
				width: 70rpx;
				height: 70rpx;
				background: rgba(0, 0, 0, 0.9);
				borderRadius: 50%;
				display: flex;
				alignItems: center;
				justifyContent: center;
				marginBottom: 0rpx;
				line-height: 1em;
				marginLeft: 20px;
			}
		}
	}


	.resultPopup {
		display: flex;
		flex-direction: column;
		alignItems: center;
		paddingBottom: 150rpx;

		.bg {
			background: no-repeat center;
			background-size: cover;
			position: relative;
		}

		.win {
			width: 735rpx;
			height: 986rpx;
			background-image: url('https://mp-02da6b36-ab1b-494d-b346-d6763fb77772.cdn.bspapp.com/resource/image/bg_win_2.png');
			background-size: 500rpx 655rpx;

			.text {
				line-height: 120rpx;
				textAlign: center;
				position: absolute;
				width: 100%;
				top: 605rpx;
				left: 0;
				color: #fff;
				fontSize: 46rpx;
				fontWeight: bolder;
			}
		}

		.loser {
			width: 735rpx;
			height: 986rpx;
			background-image: url('https://mp-02da6b36-ab1b-494d-b346-d6763fb77772.cdn.bspapp.com/resource/image/bg_lose_2.png');
			background-size: 500rpx 605rpx;

			.text {
				line-height: 80rpx;
				textAlign: center;
				position: absolute;
				padding: 0 160rpx;
				width: 100%;
				top: 545rpx;
				left: 0;
				color: #fff;
				fontSize: 40rpx;
				fontWeight: bolder;
			}
		}

		.submitBtn {
			width: 30%;
			marginTop: 40rpx;
			borderRadius: 10rpx;

			button {
				background: transparent;
				fontSize: 25rpx;
			}
		}

		.submitBtnLose {
			width: 60%;
			marginTop: -160rpx;

			button {
				background: #ee4626;
			}
		}

		.doubelBtn {
			width: 60%;
			marginTop: -160rpx;

			button {
				background: #F5D54D;
				color: #F5514d;
			}
		}

		.close {
			position: absolute;
			marginLeft: 10rpx;
			width: 38px;
			height: 38px;
			// background: rgba(0, 0, 0, 0.5);
			borderRadius: 50%;
			backdrop-filter: blur(10rpx);
			// border: 1rpx solid rgba(255, 255, 255, 0.3);
			display: flex;
			alignItems: center;
			justifyContent: center;
			z-index: 1000;
			right: 100rpx;
			top: 200rpx;
		}
	}

	.footer {
		position: fixed;
		width: 80rpx;
		height: 80rpx;
		bottom: 50rpx;
		display: flex;
		flex-direction: column;
		alignItems: center;
		justifyContent: center;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}
</style>